import 'package:dragablegridview_flutter/dragablegridview_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_module/global/colors.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'package:flutter/material.dart';
import 'package:multi_image_picker2/multi_image_picker2.dart';

import 'ItemBin.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body: UploadDetail(),
      ),
    );
  }
}
class UploadDetail extends StatefulWidget {
  UploadDetail({Key key}) : super(key: key);

  @override
  _UploadDetailState createState() {
    return _UploadDetailState();
  }
}

class _UploadDetailState extends State<UploadDetail> {

  FocusNode _focusNode = new FocusNode();
  FocusNode _focusNode1 = new FocusNode();
  FocusNode _focusNode2 = new FocusNode();
  TextEditingController _controller = new TextEditingController();
  List<Asset> images = <Asset>[];
  List<Asset> images1 = <Asset>[];
  List<ItemBin> itemBins = [];
  List<ItemBin> itemBins1 = [];
  Widget _addIcon,_addIcon1;
  var editSwitchController = EditSwitchController();
  var editSwitchController1 = EditSwitchController();

  bool _display=false;
  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() async {
    EasyLoading.show(
      status: "Loading...",
      //duration: Duration(seconds: 2)
      //maskType: EasyLoadingMaskType.black,
    );
    await Future.delayed(Duration(milliseconds: 1000), () async {
      EasyLoading.dismiss();
      setState(() {
        _display=true;
      });
    });

  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height
      ),
      designSize: Size(1080,2340),
    );
    if(_display==true) {
      _addIcon = InkWell(
        onTap: () {
          setState(() {
            loadAssets();
          });
        },
        child: Container(
          width: (ScreenUtil().screenWidth -
              ScreenUtil().setWidth(10) * 6 -
              ScreenUtil().setWidth(110)) /
              3.0,
          height: (ScreenUtil().screenWidth -
              ScreenUtil().setWidth(10) * 6 -
              ScreenUtil().setWidth(110)) /
              3.0,
          color: Color(0xff182643),
          child: Icon(
            Icons.add,
            size: 50,
            color: Colors.white,
          ),
        ),
      );
      _addIcon1 = InkWell(
        onTap: () {
          setState(() {
            loadAssets1();
          });
        },
        child: Container(
          width: (ScreenUtil().screenWidth -
              ScreenUtil().setWidth(10) * 6 -
              ScreenUtil().setWidth(110)) /
              3.0,
          height: (ScreenUtil().screenWidth -
              ScreenUtil().setWidth(10) * 6 -
              ScreenUtil().setWidth(110)) /
              3.0,
          color: Color(0xff182643),
          child: Icon(
            Icons.add,
            size: 50,
            color: Colors.white,
          ),
        ),
      );
      if (itemBins.isEmpty) itemBins.add(new ItemBin(_addIcon));
      if (itemBins1.isEmpty) itemBins1.add(new ItemBin(_addIcon1));
      return Scaffold(
        backgroundColor:Color(0xff000B1F) ,
        appBar: AppBar(
          backgroundColor: Color(0xff000B1F),
          title: Text(
            '发布作品',
            style:TextStyle(
              color:Colors.white,
            ),
          ),
          centerTitle: true,
          leading: IconButton(
            icon: Icon(Icons.arrow_back,color: Colors.white),
            onPressed: (){
              Navigator.pop(context);
            },
          ),
          actions: [
            InkWell(
              onTap: (){
                Navigator.pushNamed(context, 'uploadWorkInformation');
              },
              child: Center(
                child: Text(
                  '下一步',
                  style:TextStyle(
                    fontSize: 17,
                    color:Colors.white70,
                  ),
                ),
              ),
            ),
            SizedBox(width: ScreenUtil().setWidth(40),),
          ],
        ),
        body: Container(
          padding: EdgeInsets.fromLTRB(
            ScreenUtil().setWidth(40),
            ScreenUtil().setHeight(30),
            ScreenUtil().setWidth(40),
            ScreenUtil().setHeight(0),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '作品名称',
                style:TextStyle(
                  fontSize: ScreenUtil().setSp(45),
                  color:Colors.white70,
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(40),
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(0),
                ),
                decoration: BoxDecoration(
                  color:Color(0xff182643),
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                padding: EdgeInsets.only(left: ScreenUtil().setWidth(40)),
                //width: ScreenUtil().screenWidth - 100,
                child: TextField(
                  focusNode: _focusNode,
                  controller: _controller,
                  cursorColor: Color(0xff2DCA97),
                  decoration: InputDecoration(
                    suffixIcon: IconButton(
                      icon: Icon(
                        Icons.close,
                        color: Color(0xffBEBEBE),
                      ),
                      onPressed: () {
                        _controller.clear();
                      },
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                          Radius.circular(ScreenUtil().setHeight(20))),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent),
                    ),
                    hintText: '像素方块头',
                    hintStyle: TextStyle(
                      color: Color(0xffBEBEBE),
                      fontSize: ScreenUtil().setSp(50),
                    ),
                    labelStyle: TextStyle(
                        color: Color(0xffBEBEBE),
                        fontSize: ScreenUtil().setSp(50)),
                  ),
                ),
              ),
              SizedBox(height: ScreenUtil().setHeight(50),),
              Text(
                '作品说明',
                style:TextStyle(
                  fontSize: ScreenUtil().setSp(45),
                  color:Colors.white70,
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(40),
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(0),
                ),
                decoration: BoxDecoration(
                  color:Color(0xff182643),
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                padding: EdgeInsets.only(left: ScreenUtil().setWidth(40)),
                //width: ScreenUtil().screenWidth - 100,
                child: TextField(
                  focusNode: _focusNode1,
                  controller: _controller,
                  cursorColor: Color(0xff2DCA97),
                  decoration: InputDecoration(
                    suffixIcon: IconButton(
                      icon: Icon(
                        Icons.close,
                        color: Color(0xffBEBEBE),
                      ),
                      onPressed: () {
                        _controller.clear();
                      },
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                          Radius.circular(ScreenUtil().setHeight(20))),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent),
                    ),
                    hintText: '像素方块头',
                    hintStyle: TextStyle(
                      color: Color(0xffBEBEBE),
                      fontSize: ScreenUtil().setSp(50),
                    ),
                    labelStyle: TextStyle(
                        color: Color(0xffBEBEBE),
                        fontSize: ScreenUtil().setSp(50)),
                  ),
                ),
              ),
              SizedBox(height: ScreenUtil().setHeight(50),),
              Text(
                '作品封面图',
                style:TextStyle(
                  fontSize: ScreenUtil().setSp(45),
                  color:Colors.white70,
                ),
              ),
              Container(
                height: 130,
                child: DragAbleGridView(
                  mainAxisSpacing: ScreenUtil().setHeight(10),
                  crossAxisSpacing: ScreenUtil().setHeight(10),
                  //childAspectRatio:1.8,
                  crossAxisCount: 3,
                  itemBins: itemBins,
                  editSwitchController: editSwitchController,
                  isOpenDragAble: true,
                  animationDuration: 500,
                  //milliseconds
                  longPressDuration: 100,
                  //milliseconds
                  deleteIcon: Icon(
                    Icons.close,
                    color: Color(0xff182643),
                  ),
                  deleteIconClickListener: (int index) {
                    print(index);
                  },
                  child: (int position) {
                    //if(position!=itemBins.length-1) {
                    //  print("###" + itemBins[position].asset.name);
                    //}
                    return itemBins[position].data;
                  },
                  editChangeListener: () {
                    print("#1111");
                    changeActionState();
                  },
                ),
              ),
              SizedBox(height: ScreenUtil().setHeight(50),),
              Text(
                '作品详情图',
                style:TextStyle(
                  fontSize: ScreenUtil().setSp(45),
                  color:Colors.white70,
                ),
              ),
              Expanded(
                child: DragAbleGridView(
                  mainAxisSpacing: ScreenUtil().setHeight(10),
                  crossAxisSpacing: ScreenUtil().setHeight(10),
                  //childAspectRatio:1.8,
                  crossAxisCount: 3,
                  itemBins: itemBins1,
                  editSwitchController: editSwitchController1,
                  isOpenDragAble: true,
                  animationDuration: 500,
                  //milliseconds
                  longPressDuration: 100,
                  //milliseconds
                  deleteIcon: Icon(
                    Icons.close,
                    color: Color(0xff182643),
                  ),
                  deleteIconClickListener: (int index) {
                    print(index);
                  },
                  child: (int position) {
                    //if(position!=itemBins.length-1) {
                    //  print("###" + itemBins[position].asset.name);
                    //}
                    return itemBins1[position].data;
                  },
                  editChangeListener: () {
                    print("#1111");
                    changeActionState();
                  },
                ),
              ),
            ],
          ),
        ),

      );
    }else{
      return Container(
        width: 0,
        height: 0,
        color: AppColors.background,
      );
    }

  }
  void changeActionState() {}
  Future<void> loadAssets() async {
    List<Asset> resultList = <Asset>[];
    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 1,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(
          takePhotoIcon: "chatPage",
          doneButtonTitle: "Fatto",
        ),
        materialOptions: MaterialOptions(
          //actionBarTitleColor: "#111111",
          actionBarColor: "#111111",
          actionBarTitle: "相册",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {}
    if (!mounted) return;
    List<ItemBin> tmp = [];
    for (int i = 0; i < resultList.length; ++i)
      tmp.add(
          new ItemBin(_buildContainer(resultList[i]), asset: resultList[i]));
    //tmp.add(new ItemBin(_addIcon));
    setState(() {
      images = resultList;
      itemBins = tmp;
    });
  }

  Future<void> loadAssets1() async {
    List<Asset> resultList = <Asset>[];
    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 6,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(
          takePhotoIcon: "chatPage",
          doneButtonTitle: "Fatto",
        ),
        materialOptions: MaterialOptions(
          //actionBarTitleColor: "#111111",
          actionBarColor: "#111111",
          actionBarTitle: "相册",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {}
    if (!mounted) return;
    List<ItemBin> tmp = [];
    for (int i = 0; i < resultList.length; ++i)
      tmp.add(
          new ItemBin(_buildContainer(resultList[i]), asset: resultList[i]));
    tmp.add(new ItemBin(_addIcon1));
    setState(() {
      images = resultList;
      itemBins1 = tmp;
    });
  }
  Widget _buildContainer(Asset asset) {
    return AssetThumb(
      asset: asset,
      width: (ScreenUtil().screenWidth -
          ScreenUtil().setWidth(10) * 6 -
          ScreenUtil().setWidth(110)) ~/
          3.0,
      height: (ScreenUtil().screenWidth -
          ScreenUtil().setWidth(10) * 6 -
          ScreenUtil().setWidth(110)) ~/
          3.0,
    );
  }
}